{# @prop variant 'default'|'destructive' The variant, default to `default` #}
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
    variants: {
        variant: {
            default: 'bg-background text-foreground',
            destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
        },
    },
) -%}

<div
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    role="alert"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
